<template>
    <div class="echarts-container">
        <!-- 顶部两个饼图 -->
        <div class="bing-chart">
            <div id="left" style="width: 49.5%;height: 100%;">
                <el-card class="box-card">
                    <div slot="header">
                        <span class="title">系统基础数据统计</span>
                        <span class="title" style="float: right; padding: 3px 0;width:auto">数据统计截至2025-03-23
                            23:33</span>
                        <div class="total">
                            舆情信息采集系统共计 <span>{{ 123123 }} </span>条
                        </div>
                        <div style="display: flex; justify-content: space-between;flex-wrap: wrap;">
                            <div class="tag">
                                平台同步舆情信息 <span>12341</span>条
                            </div>
                            <div class="tag">
                                舆情覆盖涉事单位 <span>12</span>条
                            </div>
                            <div class="tag">
                                手动添加舆情信息 <span>121</span>条
                            </div>
                        </div>

                    </div>
                    <div>
                        <!-- 图表 -->
                        <div style="display: flex;">
                            <Echarts :options="chartOptions1" />
                            <Echarts :options="chartOptions2" />
                        </div>
                    </div>
                </el-card>
            </div>
            <div id="right" style="width:49.5%;height: 100%;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="title">舆情分布数量</span>
                    </div>
                    <div>

                        <div style="display: flex; justify-content: start;" class="block-container">
                            <div class="block">
                                <el-date-picker style="width: 100px;" v-model="value3" type="year" placeholder="年">
                                </el-date-picker>
                            </div>

                            <div class="block">

                                <el-date-picker style="width: 100px;" v-model="value2" type="month" placeholder="月">
                                </el-date-picker>
                            </div>
                            <div class="block">
                                <el-date-picker style="width: 100px;" type="dates" v-model="value4" placeholder="日">
                                </el-date-picker>
                            </div>
                            <el-button type="primary">查询</el-button>
                        </div>
                        <!-- 饼图三 -->
                        <div style="display: flex;">
                            <Echarts :options="chartOptions3" />
                        </div>
                        <!-- 新闻 -->
                        <div class="news">
                            <li><span>2025-02-25 高校教师违规收费事件规收费事件规收费事件规收费事件</span> <span class="news-tag">红色预警</span>
                            </li>
                            <li><span>2025-02-25 高校教师违规收费事件规收费事件规收费事</span> <span class="news-tag">红色预警</span> </li>
                            <li><span>2025-02-25 高校教师违规收费事件规件规收费事件规收费事件</span> <span class="news-tag">红色预警</span> </li>
                            <li><span>2025-02-25 高校教师违规收费事件规收费事件规收费事件</span> <span class="news-tag">红色预警</span> </li>
                            <li><span>2025-02-25 高校教师违规收费事件规收费事件件规收费事件</span> <span class="news-tag">红色预警</span> </li>
                        </div>
                    </div>

                </el-card>
            </div>
        </div>
        <!-- 底部一个折线图 -->
        <div id="bottom" style="width: 100%;height: 100%; margin-top: 20px;">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span class="title">各单位舆情等级数量情况</span>
                    <span style="float: right; padding: 3px 0;color: rgba(22, 132, 252, 1);font-size: 12px;"
                        type="text">查看详情</span>
                </div>
                <div>
                    <Echarts :options="chartOptions4" />
                </div>
            </el-card>
        </div>
    </div>
</template>
<script>
import Echarts from '../../components/Echarts/index.vue';
export default {
    components: {
        Echarts
    },
    data() {
        return {
            // 饼图数据1
            chartOptions1: {
                title: {
                    text: '舆情类别分类',
                    textStyle: {
                        color: 'rgba(16, 16, 16, 0.69)',
                        fontSize: 12
                    }
                },
                grid: {
                    top: '80%'
                },
                tooltip: {},
                angleAxis: {},
                radiusAxis: {
                    type: 'category',
                    // data: ['舆情类别', '校园管理', '师生安全', '师风师德', '学生情感', '其他'],
                    z: 10
                },
                polar: {},
                series: [
                    {
                        type: 'bar',
                        barWidth: 6,
                        data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)), // 生成6个随机数
                        coordinateSystem: 'polar',
                        name: '舆情类别',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '校园管理',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '师生安全',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '师风师德',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '学生情感',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 6 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '其他',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    }
                ],
                legend: {
                    show: true,
                    data: ['舆情类别', '校园管理', '师生安全', '师风师德', '学生情感', '其他'],
                    bottom: 0
                }
            },
            // 饼图数据2
            chartOptions2: {
                title: {
                    text: '舆情类别分类',
                    textStyle: {
                        color: 'rgba(16, 16, 16, 0.69)',
                        fontSize: 12
                    }
                },
                grid: {
                    top: '80%'
                },
                tooltip: {},
                angleAxis: {},
                radiusAxis: {
                    type: 'category',
                    // data: ['舆情类别', '校园管理', '师生安全', '师风师德', '学生情感', '其他'],
                    z: 10
                },
                polar: {},
                series: [
                    {
                        type: 'bar',
                        barWidth: 6,
                        data: Array.from({ length: 4 }, () => Math.floor(Math.random() * 100)), // 生成6个随机数
                        coordinateSystem: 'polar',
                        name: '抖音',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 4 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '新闻',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 4 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '小红书',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        type: 'bar',
                        arWidth: 6,
                        data: Array.from({ length: 4 }, () => Math.floor(Math.random() * 100)),
                        coordinateSystem: 'polar',
                        name: '微博',
                        stack: 'a',
                        emphasis: {
                            focus: 'series'
                        }
                    },

                ],
                legend: {
                    show: true,
                    data: ['抖音', '新闻', '小红书', '微博'],
                    bottom: 0
                }
            },
            // 饼图3
            chartOptions3: {
                // title: {
                //     text: '舆情预警分类',
                //     // subtext: '随机数据',
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'center',
                    textStyle: {
                        color: 'rgba(16, 16, 16, 0.69)',
                        fontSize: 12
                    },
                    data: ['红色预警', '橙色预警', '黄色预警', '蓝色预警', '零星预警']
                },
                // toolbox: {
                //     show: true,
                //     feature: {
                //         mark: { show: true },
                //         dataView: { show: true, readOnly: false },
                //         restore: { show: true },
                //         saveAsImage: { show: true }
                //     }
                // },
                series: [
                    {
                        name: '预警分类',
                        type: 'pie',
                        radius: [30, 80],
                        center: ['60%', '35%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 1,
                            color: function (params) {
                                // 为每个类别设置固定颜色
                                const colorList = ['#FF0000', '#FFA500', '#FFFF00', '#0000FF', '#808080'];
                                return colorList[params.dataIndex];
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            formatter: '{b}: {c} ({d}%)', // 标签内容格式
                            position: 'outside', // 标签显示在饼图外部
                            alignTo: 'labelLine', // 标签与连接线对齐
                            bleedMargin: 5 // 标签与饼图的间距
                        },
                        labelLine: {
                            show: true, // 显示连接线
                            length: 20, // 连接线第一段长度
                            length2: 30 // 连接线第二段长度
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: [
                            { value: Math.floor(Math.random() * 100), name: '红色预警' },
                            { value: Math.floor(Math.random() * 100), name: '橙色预警' },
                            { value: Math.floor(Math.random() * 100), name: '黄色预警' },
                            { value: Math.floor(Math.random() * 100), name: '蓝色预警' },
                            { value: Math.floor(Math.random() * 100), name: '零星预警' }
                        ]
                    }
                ]
            },
            // 柱状图折线图一体
            chartOptions4: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' // 鼠标悬停时显示阴影
                    }
                },
                legend: {
                    data: ['红色预警', '橙色预警', '黄色预警', '蓝色预警', '零星预警'], // 图例
                    bottom: 10 // 图例位置
                },
                xAxis: {
                    type: 'category',
                    data: ['土木', '机械', '电器', '信息', '交运', '计算机', '经管', '外语', '材料', '地学', '环境', '化学', '生命', '人文', '建筑', '设计', '公关', '马原', '心理'] // X 轴数据
                },
                yAxis: {
                    type: 'value' // Y 轴类型
                },
                series: [
                    {
                        name: '红色预警',
                        type: 'bar',
                        data: Array.from({ length: 19 }, () => Math.floor(Math.random() * 100)), // 随机生成柱状图数据
                        itemStyle: {
                            color: '#FF0000' // 柱状图颜色
                        }
                    },
                    {
                        name: '橙色预警',
                        type: 'bar',
                        data: Array.from({ length: 19 }, () => Math.floor(Math.random() * 100)), // 随机生成柱状图数据
                        itemStyle: {
                            color: '#FFA500' // 柱状图颜色
                        }
                    },
                    {
                        name: '黄色预警',
                        type: 'bar',
                        data: Array.from({ length: 19 }, () => Math.floor(Math.random() * 100)), // 随机生成柱状图数据
                        itemStyle: {
                            color: '#FFFF00' // 柱状图颜色
                        }
                    },
                    {
                        name: '蓝色预警',
                        type: 'bar',
                        data: Array.from({ length: 19 }, () => Math.floor(Math.random() * 100)), // 随机生成柱状图数据
                        itemStyle: {
                            color: '#0000FF' // 柱状图颜色
                        }
                    },
                    {
                        name: '零星预警',
                        type: 'bar',
                        data: Array.from({ length: 19 }, () => Math.floor(Math.random() * 100)), // 随机生成柱状图数据
                        itemStyle: {
                            color: '#808080' // 柱状图颜色
                        }
                    },
                    {
                        name: '折线图',
                        type: 'line',
                        data: Array.from({ length: 19 }, () => Math.floor(Math.random() * 100)), // 随机生成折线图数据
                        itemStyle: {
                            color: '#00FF00' // 折线图颜色
                        },
                        lineStyle: {
                            width: 3 // 折线宽度
                        }
                    }
                ]
            }
        };
    }
};
</script>
<style scoped lang="scss">
.echarts-container {
    width: 100%;
    height: 100%;

    .bing-chart {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .title {
        left: 213px;
        top: 122.75px;
        width: 96px;
        height: 17px;
        line-height: 17px;
        color: rgba(100, 100, 100, 1);
        font-size: 12px;
        text-align: left;
        font-family: Roboto-regular;
    }

    .total {
        margin-top: 10px;
        left: 213px;
        top: 151px;
        width: 100%;
        height: 29px;
        line-height: 29px;
        border-radius: 3px;
        background-color: rgba(22, 132, 252, 0.17);
        text-align: center;
        font-family: Roboto-regular;
        color: rgba(22, 132, 252, 1);
        font-size: 14px;

        span {
            color: red;
        }
    }

    .tag {
        width: 50%;
        color: rgba(22, 132, 252, 1);
        font-size: 12px;
        text-align: left;
        font-family: Roboto-regular;
        margin-top: 10px;

        span {
            color: red;
        }
    }

    .tag:nth-child(2) {
        text-align: end;
    }

    .block {
        margin-right: 20px;
    }

    .news {
        list-style: none;
        position: relative;
        margin-top: -100px;

        li {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;

            .news-tag {
                display: inline-block;
                box-sizing: border-box;
                color: red;
                border-radius: 4px;
                background-color: rgba(246, 9, 9, 0.14);
            }
        }
    }
}
</style>
